<template>
  <header id="head_top">
    <slot name='logo'></slot>
    <section  class="head_goback" v-if="head_back" @click="$router.go(-1)">
      <icon name="back" scale="3"></icon>
    </section>
    <section class="title_head" v-if="title_head">
      <span class="title_text">{{title_head}}</span>
    </section>

    <section class="head_search" v-if="head_search">
      <div class="menu" @click="$router.push({path:'/half'})">
        <icon name="zhedie" scale="2"></icon>
      </div>
      <div class="search_div">
        <input class="input-search" type="text">
        <div class="search-div">
          <span><icon name="search" scale="3"></icon></span>
          <span>搜索</span>
        </div>
      </div>
      <div class="music">
        <icon name="music" scale="3"></icon>
      </div>
    </section>

    <section class="head_chanel" v-if="head_chanel" >
      <div class="search_div">
        <input class="input-search" v-model="$props.val" type="text" >
      </div>
      <div class="head_btn" @click="$router.go(-1)">取消</div>
    </section>
    <slot name='login'></slot>
  </header>
</template>

<script>
export default {
  name: 'header',
  data () {
    return {
    }
  },
  props: ['head_search','head_back','head_chanel','title_head','val'],
  mounted: function(){
    var self = this;
    $(".head_search .search_div").click(() => {
      self.$router.push('/search');
    });
    $(".head_chanel .input-search").focus(function(){
      $(this).val('');
    })
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header {
  font-family: "微软雅黑";
}
.head_search {
  display: flex;
  position: relative;
}
.head_search .menu {
  position: absolute;
  top: 8px;
  left: 15px;
}
.head_search .music {
  position: absolute;
  top: 12px;
  right: 15px;
}
.head_chanel {
    display: flex;
    align-items: center;
    margin-top: 14px;
}
.head_chanel .search_div{
    flex: 1;
    margin: 0 20px;
}
.head_chanel .head_btn {
    width: 60px;
    height: 30px;
    line-height: 30px;
    padding-right: 20px;
    text-align: center;
    color: white;
    font-size: 16px;
    font-family: "微软雅黑";
}
 .input-search {
    color: white;
    height: 28px;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    position: absolute;
    left:0;
    padding: 0 10px;
}
.search_div {
    position: relative;
    width: 70%;
    height: 30px;
    margin: 14px auto;
    background: #2aaa6d;
    border-radius: 5px;
    box-shadow: inset 0 1px 0 0 #25945f
}
.search_div>div {
    height: 30px;
    width: 57px;
    line-height: 30px;
    color: white;
    position: relative;
    padding-top: 1px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
}
.search_div>div span {
    display: inline-block;
}
.search_div>div span:nth-child(1){
    margin-top: 2px;
  }
header {
  height: 50px;
  line-height: 50px;
  width: 100%;
  background: #32c27c;
  position: fixed;
  top: 0;
  z-index: 333;
}
.head_goback {
  position: absolute;
  top: 8px;
  left: 5px;
  color: #2c3e50;
}
.title_head .title_text {
  font-size: 2rem;
  color: white;
}
::-webkit-input-placeholder {
  color: white;
}
:-moz-placeholder {
  color: white;
}
::-moz-placeholder {
  color: white;
}
:-ms-input-placeholder {
  color: white;
}
</style>
